import React, { useEffect } from "react"
import { Image, View } from "@tarojs/components"
import GpContainer from "@/components/GpContainer"
import { useSetState } from "@/utils/hooks"
import Taro, { usePullDownRefresh, useReachBottom } from "@tarojs/taro"
import styles from "./index.module.scss"
import ImageCascade from "../../home/components/imageCascade"
import { getMyTopics } from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"
import GpScrollLoading from "@/components/GpScrollLoading"
import { navigation } from "@/utils/router"
import { pageMapperCommunity } from "@/constants/pageMap"
import GpEmpty from "@/components/GpEmpty"

type IState = {
  current: number
  hasMore: boolean
  list: IApiRelative.IGetMyTopics.IGetMyTopicsItem[]
}
/**
 * @page 我的话题
 */
export default function MyTopic() {
  const [state, setState, stateRef] = useSetState<IState>(
    {
      current: 1,
      hasMore: true,
      list: []
    },
    true
  )
  useEffect(() => {
    fetchMyTopics()
  }, [])
  useReachBottom(() => {
    if (stateRef.current!.hasMore) {
      setState({ current: stateRef.current!.current + 1 })
      fetchMyTopics()
    }
  })
  usePullDownRefresh(() => {
    setState({ current: 1, hasMore: true })
    fetchMyTopics()
    Taro.stopPullDownRefresh()
  })
  function fetchMyTopics() {
    Taro.showLoading({
      title: "加载中..."
    })
    getMyTopics({
      pagination: {
        current: stateRef.current!.current,
        pageSize: 10
      },
      search: {},
      sort: {
        predicate: "",
        reverse: false
      }
    })
      .then(res => {
        Taro.hideLoading()
        if (requestIsFullfilled(res)) {
          const { list, pagination } = res.data.data
          setState({
            list: pagination.current === 1 ? list : [...stateRef.current!.list, ...list],
            hasMore: pagination.current < pagination.pageCount
          })
        }
      })
      .catch(() => {
        Taro.hideLoading()
      })
  }
  function renderEmpty() {
    return (
      <GpEmpty
        imageProps={{
          src: "https://static.91goodschool.com/UpFiles/public/yikao/image/xinzhi.png",
          style: {
            width: 126,
            height: 112
          }
        }}
        emptyProps={{
          style: {
            paddingTop: 120
          }
        }}
        description="还没有参与任何话题哦"
      />
    )
  }
  function renderContent() {
    if (state.list.length > 0) {
      return (
        <View className={styles.list}>
          {state.list.map(l => (
            <View
              className={styles.item}
              key={l.id}
              onClick={() => navigation(pageMapperCommunity.WordDetail, { id: l.id })}
            >
              {l.thumbnail && <Image src={l.thumbnail} className={styles.image} />}
              <View className={styles.itemRight}>
                <View className={styles.title}># {l.title}</View>
                <View className={styles.desc}>{l.description}</View>
                <View className={styles.bottom}>
                  <ImageCascade images={l.miniVisitorHeads} />
                  {l.participantCount}人已参与丨{l.commentCount + l.noteCount}篇内容
                </View>
              </View>
            </View>
          ))}
        </View>
      )
    }
    return renderEmpty()
  }
  return (
    <GpContainer
      style={{
        borderBlockColor: "#F7F7F7",
        minHeight: "100vh"
      }}
    >
      {renderContent()}
      {state.hasMore ? (
        <GpScrollLoading />
      ) : state.list.length > 0 ? (
        <View className={styles.noMoreTip}>-没有更多了-</View>
      ) : null}
    </GpContainer>
  )
}
